<template>
  <div class="article-box">
    <div class="article-box-left">
      <div class="page-index">
        <div class="page-index-warp">
          文章详情
        </div>
      </div>
      <div class="article-detail">

        <div class="title">{{article.title}}</div>
        <div class="msg">
          <span>前端开发</span>
          <span>浏览：{{article.views}}</span>
          <span>{{article.updatedAt | time}}</span>
        </div>
        <div class="content">
          <vue-markdown :toc="true" toc-id="toc" toc-anchor-link-symbol="" :stoc-first-level="0" :source="article.content" :toc-rendered="tocAllRight"></vue-markdown>
        </div>
      </div>
    </div>

    <div class="article-box-right">
      <div id="toc"></div>
    </div>

  </div>
</template>
<script>

  import VueMarkdown from 'vue-markdown'
  import Api from "../../api"
export default {
  data () {
    return {
      article:[]
    }
  },
  methods:{
    tocAllRight: function (tocHtmlStr) {
      console.log("toc is parsed :", tocHtmlStr);
    }
  },
  components:{
    VueMarkdown
  },
  mounted(){
    Api.getArticleDetail(this.$route.params.id).then((response)=>{
        if(response.status===200){
          this.article=response.data;
        }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >

</style>
